<%@page pageEncoding="UTF-8" %>
<%@ include file="../include/header.jsp" %>
<body>
<div id="app" v-cloak>

    <!--条件查询 -->
    <div class="toolbar2">
        <el-form :inline="true" :model="filters" label-position="top" size="small">
            <div style="justify-content: space-between;display: flex;align-items: center">
                <div style="margin-left: 16px;position: relative;">
                    <el-form-item label="账号">
                        <el-input v-model="filters.searchStr" placeholder="账号名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" @click="loadData" class="sbtn">查询</el-button>
                    </el-form-item>
                </div>

                <el-form-item label=" " style="margin-right: 25px;">
                    <el-button type="primary" @click="handleAdd" class="sbtn">新增</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div style="position: relative">
        <el-table :data="tableData" border stripe v-loading="loading" :height="tableH" ref="table">
            <el-table-column prop="loginName" label="账号" min-width="100"></el-table-column>
            <el-table-column prop="realName" label="姓名" min-width="100"></el-table-column>
            <el-table-column prop="mobile" label="电话" min-width="100"></el-table-column>
            <ex-table-column-enum prop="position" enum-cd="002" label="职位" min-width="100"></ex-table-column-enum>
            <el-table-column prop="enabled" label="状态" min-width="100">
                <template scope="scope">
                    <el-tag type="warning" size="small" v-if="scope.row.enabled == 2">禁用</el-tag>
                    <el-tag type="success" size="small" v-if="scope.row.enabled == 1">正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template scope="scope">
                    <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="info" size="small" @click="handleEditAccount(scope.$index, scope.row)">账号
                    </el-button>
                    <el-button type="danger" size="small" v-if="scope.row.code != 'admin'"
                               @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>


    <div style="position: absolute;right: 8px;margin: 5px 0 5px 0;">
        <el-pagination v-if="isMobile == 'true'" :current-page="page" :page-size="size" :pager-count="2" :total="total"
                       :page-sizes="[10,20,50,100]" @size-change="sizeChange" @current-change="handleCurrentChange"
                       layout="total, prev, pager, next"></el-pagination>
        <el-pagination v-else :current-page="page" :page-size="size" :total="total" :page-sizes="[10,20,50,100]"
                       @size-change="sizeChange" @current-change="handleCurrentChange"
                       layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>


    <!--编辑界面-->
    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" @open="handleOpen"
               @close="handleClose"
               width="700px">
        <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm" :inline="false">
            <!-- <el-form-item label="账号" prop="loginName">
                <el-input v-model.trim="editForm.loginName" auto-complete="off" style="width: 320px;" :disabled="editForm.id != undefined"></el-input>
            </el-form-item> -->
            <el-form-item label="姓名" prop="realName">
                <el-input v-model.trim="editForm.realName" auto-complete="off" style="width: 320px;"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="mobile">
                <el-input v-model.trim="editForm.mobile" auto-complete="off" style="width: 320px;"></el-input>
            </el-form-item>
            <el-form-item label="职位" prop="position">
                <ex-select-enum v-model="editForm.position" enum-cd="002" style="width: 320px;"></ex-select-enum>
            </el-form-item>
            <el-form-item label="状态" prop="enabled">
                <el-radio-group v-model="editForm.enabled">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="2">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSave" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>

    <el-dialog :title='"设置账号密码"' :visible.sync="editAccountFormVisible" :close-on-click-modal="false"
               width="700px">
        <el-form :model="editAccountForm" label-width="100px" :rules="editAccountFormRules" ref="editAccountForm"
                 :inline="false">
            <el-form-item label="账号" prop="loginName">
                <el-input v-model.trim="editAccountForm.loginName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model.trim="editAccountForm.password" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleAccountSave" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    $(window).resize(function () {
        app.tableH = $(window).height() - 155;
    });
    var app = new Vue({
        el: '#app',
        data: {
            isMobile: '${isMobile}',
            tableH: $(window).height() - 155,
            loading: false,
            page: 1,
            size: 10,
            total: 0,
            filters: {
                searchStr: ''
            },
            editFormVisible: false,
            editLoading: false,
            editFormRules: {
                realName: [{
                    required: true,
                    message: '不能为空！'
                }],
                mobile: [{
                    required: true,
                    message: '不能为空！'
                }],
                position: [{
                    required: true,
                    message: '不能为空！'
                }],
                enabled: [{
                    required: true,
                    message: '不能为空！'
                }]
            },
            editForm: {},
            tableData: [],
            editAccountFormVisible: false,
            editAccountForm: {},
            editAccountFormRules: {
                loginName: [{
                    required: true,
                    message: '不能为空！'
                }],
                password: [{
                    required: true,
                    message: '不能为空！'
                }]
            }
        },
        created: function () {
            this.loadData();
        },
        methods: {
            loadData: function () {
                this.loading = true;
                var data = Object.assign({
                    roleId: 1
                }, this.filters);
                data.page = this.page;
                data.size = this.size;
                $.ajax({
                    url: "${ctx}/backstage/supervisor/query",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.total = returndata.data.count;
                            app.tableData = returndata.data.list;
                        } else {
                            app.total = 0;
                            app.tableData = [];
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });
            },
            handleSearch: function () {
                this.loadData();
            },
            sizeChange: function (val) {
                this.size = val;
                this.loadData();
            },
            handleCurrentChange: function (val) {
                this.page = val;
                this.loadData();
            },
            handleClose: function () {
                this.editLoading = false;
            },
            handleOpen: function () {
                if (this.$refs.editForm) {
                    this.$refs.editForm.resetFields();
                }
            },
            handleAdd: function () {
                this.editForm = {enabled: 1};
                this.editFormVisible = true;
            },
            handleEdit: function (index, row) {
                this.editForm = Object.assign({}, row);
                this.editFormVisible = true;
            },
            handleSave: function () {
                this.$refs['editForm'].validate(function (value) {
                    if (value) {
                        app.editLoading = true;
                        $.ajax({
                            url: "${ctx}/backstage/supervisor/edit",
                            data: app.editForm,
                            dataType: 'json',
                            success: function (returndata) {
                                if (returndata.success) {
                                    app.loadData();
                                    app.$message({
                                        message: '提交成功!',
                                        type: 'success'
                                    });
                                    app.editFormVisible = false;
                                } else {
                                    app.$message({
                                        message: returndata.errors.message,
                                        type: 'error'
                                    });
                                }
                                app.editLoading = false;
                            }
                        });
                    }
                });
            },
            handleDelete: function (index, row) {
                this.$confirm('确认删除该记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    app.editLoading = true;
                    $.ajax({
                        url: "${ctx}/backstage/supervisor/delete",
                        data: {
                            id: row.id
                        },
                        dataType: 'json',
                        success: function (returndata) {
                            if (returndata.success) {
                                app.loadData();
                                app.$message({
                                    message: '删除成功!',
                                    type: 'success'
                                });
                            } else {
                                app.$message({
                                    message: returndata.errors.message,
                                    type: 'error'
                                });
                            }
                            app.editLoading = false;
                        }
                    });
                });
            },
            handleEditAccount: function (index, row) {
                if (this.$refs.editAccountForm) {
                    this.$refs.editAccountForm.resetFields();
                }
                this.editAccountForm = Object.assign({}, row, {
                    password: ''
                });
                this.editAccountFormVisible = true;
            },
            handleAccountSave: function () {
                this.$refs['editAccountForm'].validate(function (value) {
                    if (value) {
                        app.editLoading = true;
                        $.ajax({
                            url: "${ctx}/backstage/supervisor/setAcount",
                            data: app.editAccountForm,
                            dataType: 'json',
                            success: function (returndata) {
                                if (returndata.success) {
                                    app.loadData();
                                    app.$message({
                                        message: '提交成功!',
                                        type: 'success'
                                    });
                                    app.editAccountFormVisible = false;
                                } else {
                                    app.$message({
                                        message: returndata.errors.message,
                                        type: 'error'
                                    });
                                }
                                app.editLoading = false;
                            }
                        });
                    }
                });
            },
            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                if (date.length < 10) {
                    var date = new Date(date * 1000); //如果date为10位不需要乘1000
                } else {
                    var date = new Date(date);
                }
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                return Y + M + D;
            }
        }
    });
</script>
